<template>
  <div class="app-container">
    <!--编写ElementUI组件-->
    <!--<el-button type="success" @click="addDialogVisible = true">新增</el-button>-->
    <el-popconfirm title="确定删除商品吗？" @onConfirm="deleteProduct">
    <el-button  style="margin-left:10px" slot="reference" type="danger" >删除</el-button>
  </el-popconfirm>
    <br/>
    <!--表格-->
    <el-table
      ref="multipleTable"
      :data="products"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="checked">
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
      <el-table-column  label="商品图片" align="center" width="150" >
        <template slot-scope="scope">
          <el-image style="width:150px;height:150px" :src="scope.row.pimage"/>
        </template>
      </el-table-column>
      <el-table-column prop="productName" label="商品名称" align="center" width="150"></el-table-column>
      <el-table-column prop="productPrice" label="商品价格" align="center" width="150"></el-table-column>
      <el-table-column prop="productKind" label="商品类别" align="center" ></el-table-column>
      <el-table-column prop="productNum" label="库存数量" align="center" ></el-table-column>
      <el-table-column prop="productDate" label="商品时间" align="center" ></el-table-column>
      <el-table-column prop="pState.productStateName" label="商品状态" align="center" ></el-table-column>
      <!--<el-table-column label="操作" min-width="100" align="center">-->
        <!--<template slot-scope="scope">-->
          <!--<el-button size="mini" type="primary" @click="handleEdit(scope.row.productId)">编辑</el-button>-->
        <!--</template>-->
      <!--</el-table-column>-->
    </el-table>
    <br/>
    <!--分页栏-->
    <el-row>
      <el-col :span="20" align="center">
        <el-pagination background layout="prev, pager, next" :current-page="currentPage" :hide-on-single-page="hidePage" :page-size="pageSize" :total="total" @current-change="page"></el-pagination>
      </el-col>
    </el-row>
    <!--&lt;!&ndash;新增弹窗&ndash;&gt;-->
    <!--<el-dialog title="新增商品" :visible.sync="addDialogVisible">-->
      <!--<el-form :model="insertProduct" ref="insertProduct">-->
        <!--<el-row :gutter="60">-->
          <!--<el-col :span="12">-->
            <!--<el-form-item label="商品名称" prop="productName" >-->
              <!--<el-input placeholder="请输入商品名称" v-model="insertProduct.productName" autocomplete="off"></el-input>-->
            <!--</el-form-item>-->
          <!--</el-col>-->
          <!--<el-col :span="12">-->
            <!--<el-form-item label="商品价格" prop="productPrice">-->
              <!--<el-input placeholder="请输入商品价格" v-model="insertProduct.productPrice" autocomplete="off"></el-input>-->
            <!--</el-form-item>-->
          <!--</el-col>-->
        <!--</el-row>-->
        <!--<el-row :gutter="60">-->
          <!--<el-col :span="12">-->
            <!--<el-form-item label="商品类别" prop="productKind">-->
              <!--<el-input placeholder="请输入商品类别" v-model="insertProduct.productKind" autocomplete="off"></el-input>-->
            <!--</el-form-item>-->
          <!--</el-col>-->
          <!--<el-col :span="12">-->
            <!--<el-form-item label="库存数量" prop="productNum">-->
              <!--<el-input placeholder="请输入库存数量" v-model="insertProduct.productNum" autocomplete="off"></el-input>-->
            <!--</el-form-item>-->
          <!--</el-col>-->
        <!--</el-row>-->
        <!--<el-row>-->
          <!--<el-col :span="12">-->
            <!--<el-form-item label="商品时间" prop="productDate">-->
              <!--<el-input type="date" style="width: 280px" v-model="insertProduct.productDate" autocomplete="off"></el-input>-->
            <!--</el-form-item>-->
          <!--</el-col>-->
          <!--<el-col :span="12">-->
            <!--<el-form-item label="商品状态" style="margin-left: 30px" prop="productState">-->
              <!--<el-select  style="width: 280px;"placeholder="请选择商品状态" v-model="insertProduct.productState">-->
                <!--<el-option v-for="item in productStates" :value="item.productStateId" :label="item.productStateName"></el-option>-->
              <!--</el-select>-->
            <!--</el-form-item>-->
          <!--</el-col>-->
        <!--</el-row>-->

      <!--</el-form>-->
      <!--<div slot="footer" class="dialog-footer">-->
        <!--<el-button @click="addDialogVisible = false">取 消</el-button>-->
        <!--<el-button type="primary" @click="addProduct">确 定</el-button>-->
      <!--</div>-->
    <!--</el-dialog>-->
    <!--&lt;!&ndash;更新弹窗&ndash;&gt;-->
    <!--<el-dialog title="更新商品" :visible.sync="updateDialogVisible">-->
      <!--<el-form :model="updateForm" ref="updateForm">-->
        <!--<el-row :gutter="60">-->
          <!--<el-col :span="12">-->
            <!--<el-form-item label="商品名称" prop="productName">-->
              <!--<el-input v-model="updateForm.productName" autocomplete="off"></el-input>-->
            <!--</el-form-item>-->
          <!--</el-col>-->
          <!--<el-col :span="12">-->
            <!--<el-form-item label="商品价格" prop="productPrice">-->
              <!--<el-input v-model="updateForm.productPrice" autocomplete="off"></el-input>-->
            <!--</el-form-item>-->
          <!--</el-col>-->
        <!--</el-row>-->
        <!--<el-row :gutter="60">-->
          <!--<el-col :span="12">-->
            <!--<el-form-item label="商品类别" prop="productKind">-->
              <!--<el-input v-model="updateForm.productKind" autocomplete="off"></el-input>-->
            <!--</el-form-item>-->
          <!--</el-col>-->
          <!--<el-col :span="12">-->
            <!--<el-form-item label="库存数量" prop="productNum">-->
              <!--<el-input v-model="updateForm.productNum" autocomplete="off"></el-input>-->
            <!--</el-form-item>-->
          <!--</el-col>-->
        <!--</el-row>-->
        <!--<el-row>-->
          <!--<el-col :span="12">-->
            <!--<el-form-item label="商品时间" prop="productDate">-->
              <!--<el-input type="date" style="width: 280px" v-model="updateForm.productDate" autocomplete="off"></el-input>-->
            <!--</el-form-item>-->
          <!--</el-col>-->
          <!--<el-col :span="12">-->
            <!--<el-form-item label="商品状态" style="margin-left: 30px" prop="productState">-->
              <!--<el-select  style="width: 280px;"placeholder="请选择商品状态" v-model="updateForm.productState">-->
                <!--<el-option v-for="item in productStates" :value="item.productStateId" :label="item.productStateName"></el-option>-->
              <!--</el-select>-->
            <!--</el-form-item>-->
          <!--</el-col>-->
        <!--</el-row>-->
      <!--</el-form>-->
      <!--<div slot="footer" class="dialog-footer">-->
        <!--<el-button @click="updateDialogVisible = false">取 消</el-button>-->
        <!--<el-button type="primary" @click="updateProduct">确 定</el-button>-->
      <!--</div>-->
    <!--</el-dialog>-->
  </div>
</template>

<script>
  import request from '@/utils/cbp-request.js'
  // 编写vue.js代码
  export default {
    data() {
      return {
        currentPage:1,
        pageSize:10,
        total:0,
        hidePage:true,
        product: {
          productName:'',
          productKind:'',
        },
        productStates:[],
        products:[],
        addDialogVisible: false,
        updateDialogVisible: false,
        insertProduct:{
          productName: "",
          productKind: '',
          productNum: '',
          productPrice: '',
          productDate:'',
          productState:''
        },
        updateForm:{
          productName: "",
          productKind: '',
          productNum: '',
          productPrice: '',
          productDate:'',
          productState:''
        },
        deleteIds:[]//存储勾选的商品id
      }
    },
    methods: {
      page(pageNum){
        request({
          url:'/product/page/'+pageNum+"/"+this.pageSize,
          method:'get',
        }).then((resp) =>{
          this.products = resp.data.list;
          this.total = resp.data.total;
          this.currentPage = resp.data.pageNum;
          console.log(this.currentPage);
        })
      },
      getAllProductStates(){
        request({
          url:'/productState',
          method:'get',
        }).then( (resp) =>{
          this.productStates=resp.data;
        })
      },
      addProduct(){
        request({
          url:'/product',
          method:'post',
          data:this.insertProduct,
        }).then((resp) =>{
          if (resp.status == 2000){
            this.addDialogVisible = false;//关闭弹窗
            this.$message({
              message: resp.msg,
              type: 'success'
            });
            this.resetForm("insertProduct")//清空指定ref值的表单
            this.page(this.currentPage)//刷新页面
          }
        })
      },
      // 查询商品弹窗回显
      handleEdit(productId) {
        //查询点击按钮所在行的商品
        request({
          url: '/product/'+productId,
          method: 'get',
        }).then((resp) => {
          this.updateDialogVisible = true;//打开弹窗
          this.updateForm = resp.data;//设置回显数据对象
        })
      },
      updateProduct() {
        request({
          url: 'product',
          method: 'put',
          data:this.updateForm//前端对象和后端对象属性名完全一致
        }).then((resp) => {
          if(resp.status === 2000){
            this.updateDialogVisible = false;//关闭弹窗
            this.$message({
              message: resp.msg,
              type: 'success'
            });
            this.page(this.currentPage)//刷新
          }
        }).catch((error) => {

        })
      },
      //清空表单
      resetForm(formName) {
        this.$nextTick(()=>{
          this.$refs[formName].resetFields();
        })
      },
      checked(selection){
        this.deleteIds = [];//还原数组数据
        for (let i = 0; i < selection.length; i++) {
          this.deleteIds.push(selection[i].productId);//项数组添加数据
        }
      },
      deleteProduct(){
        //判断是否选中
        if(this.deleteIds.length > 0){
          //发送后端进行删除处理
          request({
            url: 'product',
            method: 'delete',
            data:this.deleteIds
          }).then((resp) => {
            if(resp.status === 2000){
              this.$message({
                message: resp.msg,
                type: 'success'
              });
              if (this.total%this.pageSize ==1){
                this.currentPage=this.currentPage-1;
              }
              this.page(this.currentPage)//刷新
            }
          }).catch((error) => {

          })
        }else{
          this.$message({
            message: '删除商品，需要至少勾选一项',
            type: 'warning'
          });
        }

      },
    },mounted() {
      this.page(1);
      this.getAllProductStates();
    }
  }
</script>

<style scoped>
  .app-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 84px);
  }
</style>
